<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
				:label-position="labelPosition" label="房源名称" prop="house_name">
				<u-input :border="border" placeholder="请输入房源名称" v-model="model.house_name" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
				:label-position="labelPosition" label="房源地址" prop="address">
				<u-input :border="border" placeholder="请输入房源地址" v-model="model.address" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
				:label-position="labelPosition" label="关键词" prop="keywords">
				<u-input :border="border" placeholder="请输入关键词" v-model="model.keywords" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
				:label-position="labelPosition" label="房间简介" prop="house_info">
				<u-input :border="border" placeholder="请输入房间简介" v-model="model.house_info" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="120"
				:label-position="labelPosition" label="房间价格" prop="price">
				<u-input :border="border" placeholder="请输入房间价格" v-model="model.price" type="number"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="会员专区" prop="vip_type" label-width="150">
				<u-subsection :list="['普通房源' , '会员专享']" @change="vip_type_change"></u-subsection>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="上传图片" prop="photo" label-width="150">
				<u-upload @on-uploaded='img_success' :header='{
					...header ,
					"content-type": "application/x-www-form-urlencoded"
				}' :action="BaseUrl+'/business/upload'" :form-data="{thumb: true,type: 2 ,...header}" ref="uUpload"
					:auto-upload='false' :max-size="5 * 1024 * 1024" max-count="6" width="200" height="200"></u-upload>
			</u-form-item>
		</u-form>
		<!-- <view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text">
				勾选代表同意uView的版权协议
			</view>
		</view> -->
		<u-button @click="submit" type='warning'>提交</u-button>
		<u-toast ref="uToast" :icon='false' />

	</view>
</template>

<script>
	import {
		BaseUrl
	} from '@/const/index.js';
	export default {
		data() {
			let that = this;
			return {
				uploaded_list: [], // 已上传的列表
				BaseUrl: BaseUrl,
				model: {
					house_name: '',
					address: '',
					keywords: '',
					house_info: '',
					price: "",
					vip_type: '1',
				},
				rules: {
					house_name: [{
							required: true,
							message: '请输入房源名称',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 10,
							message: '房源名称长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
						// {
						// 	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						// 	validator: (rule, value, callback) => {
						// 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						// 		return this.$u.test.chinese(value);
						// 	},
						// 	message: '房源名称必须为中文',
						// 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// 	trigger: ['change', 'blur'],
						// },
					],
					address: [{
						required: true,
						message: '请填写房源地址',
						trigger: 'blur',
					}],
					keywords: [{
						required: true,
						message: '请填写关键词',
						trigger: 'blur',
					}],
					house_info: [{
						required: true,
						message: '请填写房间简介',
						trigger: 'blur',
					}],
					price: [{
						required: true,
						message: '请填写关房间价格',
						trigger: 'blur',
					}],

					intro: [{
							required: true,
							message: '请填写简介'
						},
						{
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change',
						},
						// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
						{
							pattern: /^[\u4e00-\u9fa5]+$/gi,
							message: '简介只能为中文',
							trigger: 'change',
						},
					],
				},
				border: true,
				check: false,
				selectStatus: 'close',

				labelPosition: 'top',
				errorType: ['message', 'border'],
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			img_success(data, index, lists, name) {
				console.log(data);
				let flag = true;
				let img_list = {};
				for (let i = 0; i < data.length; i++) {
					if (data[i].response == null || data[i].response.code == 0) {
						console.log('上传不成功');
						flag = false;
						break;
					} else {
						img_list[`img[${i}]`] = data[i].response.path;
					};
				};
				if (flag) {
					console.log(img_list);
					this.$u.api.applyData({
						...this.model,
						...this.header,
						...img_list,
					}).then(res => {
						this.$refs.uToast.show({
							title: `提交成功,等待后台审核`,
							type: 'warning',
							position: 'bottom',
							icon: false,
						});
						setTimeout(() => {
							this.$u.route({
								type: 'back'
							});
						} , 1200)
					})
				}
			},
			vip_type_change(index) {
				this.model.vip_type = index.toString();
			},
			async submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						// let img_list = this.$refs.uUpload.lists;
						// let tr_promise = [];
						// for (let i = 0; i < img_list.length; i++) {
						// 	let base64 = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(img_list[i].url, 'base64') ;
						// 	tr_promise.push(base64);
						// 	this.$u.api.upload()
						// };
						await this.$refs.uUpload.upload();
						let files = [];
						files = await this.$refs.uUpload.lists.filter(val => {
							return val.progress == 100;
						})

					} else {
						console.log('验证失败');
					}
				});
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.model.agreement = e.value;
			},
		},
		computed: {
			header: function() {
				let header = {
					token: this.vuex_token,

				};
				return header;
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 80rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
